<template>
  <div id="sort-card" class="sort-card">
    <base-card>
      <div class="buttonList">
      <router-link v-for="item in sortTitles" :key="item">{{item}}</router-link>
      <el-button round id="compareSort" @click="linkToCompareSort">比较排序</el-button>
      <el-button round id="radixSort" @click="linkToRadixSort">基数排序</el-button>
      <el-button round id="heapSort" @click="linkToHeapSort">堆排序</el-button>
      </div>
    </base-card>
  </div>
  
</template>

<script>
import BaseCard from './BaseCard'
export default {
  name:'SortCard',
  components:{
    BaseCard
  },
  data(){
    return{
      sortTitles:['比较排序','基数排序','堆排序']
    }
  },
  methods:{
    linkToCompareSort(){
      this.$router.push('/compareSort')
    },
    linkToRadixSort(){
      this.$router.push('/radixSort')
    },
    linkToHeapSort(){
      this.$router.push('/heapSort')
    }
  }
}
</script>

<style scoped>

</style>